<template>
  <!-- 类别 -->
  <a-card :bordered="false">
    <a-row type="flex" justify="space-between" slot="title"
      >项目类别设置<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button></a-row
    >
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :scroll="{ y: 300 }"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :expandedRowKeys="expandedRowKeys"
      @change="handleTableChange"
      @expand="handleExpand"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
          <a>删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a @click="handleAddSub(record)">添加下级</a>
      </span>
    </a-table>

    <!-- 分类节点设置 -->
    <category-modal ref="modalForm" @ok="modalFormOk"></category-modal>
  </a-card>
</template>

<script>
import CategoryModal from './CategoryModal'
import { postAction, getAction, deleteAction } from '@/api/manage'
export default {
  name: 'CategoryConfig',
  components: {
    CategoryModal
  },
  props: {
    title: String,
    rootId: String
  },
  data() {
    return {
      columns: [
        {
          title: '分类名称',
          align: 'left',
          dataIndex: 'name'
        },
        {
          title: '分类编码',
          align: 'left',
          dataIndex: 'code'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      url: {
        list: '/bizConfig/list',
        category: '/sys/category/loadTreeData',
        addCategory: '/sys/category/add',
        deleteCategory: '/sys/category/delete'
      },
      pid: '',
      queryParam: {},
      expandedRowKeys: []
    }
  },
  created() {
    this.loadCategory()
  },
  watch: {
    rootId: {
      handler(nv, ov) {
        this.loadCategory()
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 加载分类
     */
    loadCategory() {
      this.loading = true
      let params = {
        pid: this.rootId
      }
      return new Promise(resolve => {
        getAction(this.url.category, params).then(res => {
          if (res.success) {
            let result = res.result
            this.dataSource = this.setDataForCategory(res.result)
            this.dataSource = [...this.dataSource]
          } else {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      })
    },
    /**
     * 添加分类
     */
    addCategory(pid) {
      postAction(this.url.addCategory, params).then(res => {})
    },
    modalFormOk(formData, arr) {
      if (!formData.id) {
        this.loadCategory()
      } else {
        this.editOk(formData, this.dataSource)
        this.dataSource = [...this.dataSource]
      }
    },
    editOk(formData, arr) {
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == formData.id) {
            arr[i] = formData
            break
          } else {
            this.editOk(formData, arr[i].children)
          }
        }
      }
    },
    setDataForCategory(result) {
      return result.map(item => {
        //判断是否标记了带有子节点
        if (item['leaf'] == false) {
          item.children = []
        }
        return {
          children: item.children,
          code: item.code,
          icon: item.icon,
          id: item.key,
          leaf: item.leaf,
          pid: item.parentId,
          name: item.title,
          value: item.value
        }
        return item
      })
    },
    handleTableChange() {},
    handleEdit(record) {
      this.$refs.modalForm.rootId = this.pid
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    handleAdd() {
      this.$refs.modalForm.rootId = this.pid
      this.$refs.modalForm.add({ pid: this.pid })
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleDelete(record) {
      let that = this
      deleteAction(that.url.deleteCategory, { id: record.id }).then(res => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadCategory()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    /**
     * 添加下级
     */
    handleAddSub(record) {
      this.$refs.modalForm.rootId = this.pid
      this.subExpandedKeys = []
      this.$refs.modalForm.subExpandedKeys = this.subExpandedKeys
      this.$refs.modalForm.title = '添加子分类'
      this.$refs.modalForm.edit({ pid: record.id })
      this.$refs.modalForm.disableSubmit = false
    },
    /**
     * 展开下级
     */
    handleExpand(expanded, record) {
      // 判断是否是展开状态
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        let params = {
          pid: record.id
        }
        getAction(this.url.category, params).then(res => {
          if (res.success) {
            let result = res.result
            record.children = this.setDataForCategory(res.result)
            this.dataSource = [...this.dataSource]
          } else {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      } else {
        let keyIndex = this.expandedRowKeys.indexOf(record.id)
        if (keyIndex >= 0) {
          this.expandedRowKeys.splice(keyIndex, 1)
        }
      }
    }
  }
}
</script>

<style></style>
